<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-10 16:28:14
 * @FilePath: \tianjushi-kanban\src\components\charts\LineArea1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: {
        xData: ["1月", "2月", "3月", "4月", "5月"],
        yData: [
          {
            value: [200, 300, 400, 200, 300],
            title: "时间",
            color: "#1BC85E",
          },
          {
            value: [200, 200, 100, 200, 200],
            title: "完成率",
            color: "#f5804d",
          },
        ],
      },
    },
    fontSize: {
      default: 16,
      type: Number,
    },
     min: {
      default: null,
      type: Number,
    },
     max: {
      default: null,
      type: Number,
    },

  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      let serdata = [];
      let legends = [];
      props.chartdata.yData.forEach((v, index) => {
        legends.push(v.title);
        serdata.push({
          name: v.title,
          type: "line",
          smooth: true,
          areaStyle: {
            //区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: hexToRgba(v.color, 0.4),
                  },
                  {
                    offset: 1,
                    color: hexToRgba(v.color, 0.1),
                  },
                ],
                false
              ),
              shadowColor: hexToRgba(v.color, 0.9), //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            },
          },
          yAxisIndex: 0,
          itemStyle: {
            /*设置折线颜色*/
            normal: {
              color: v.color,
              label: {
                textStyle: {
                  fontSize: props.fontSize, //更改坐标轴文字大小
                },
                show: true,
                position: "top",
                formatter: "{c}",
                color: "#fff",
              },
            },
          },
          data: v.value,
          zlevel: 1,
        });
      });
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "60",
          right: "30",
          bottom: "30",
        },
        legend: {
          data: legends,
          textStyle: {
            color: "#ffffff",
            fontSize: props.fontSize,
          },
        },
        xAxis: [
          {
            type: "category",
            data: props.chartdata.xData,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            // name: "产量（吨）",
            min: function (value) {
              return props.min; 
            },
            max: function (value) {
              return props.max;
            },
            scale: true,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: props.fontSize, //更改坐标轴文字大小
              },
            },
            //坐标轴内线的样式
            splitLine: {
              lineStyle: {
                color: "#287BCA",
                //type:'dashed'虚线
              },
            },
          },
        ],
        // dataZoom: [
        //   {
        //     type: "inside",
        //     zoomLock: true,
        //     moveOnMouseWheel: true,
        //     start: 93,
        //     end: 100,
        //   },
        //   {
        //     show: true,
        //     handleSize: 0,
        //     fillerColor: "rgba(167,183,204,0.1)",
        //     borderColor: "rgba(167,183,204,0)",
        //     bottom: 0,
        //     realtime: true,
        //     start: 93,
        //     end: 100,
        //   },
        // ],
        series: serdata,
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>